<template>
  <div>
    <van-nav-bar title="申请退款" left-arrow left-text="用户"  @click-left="onClickLeft"/>
    <div class="warning">
      提交退款申请后请联系服务商
      <p>联系方式： {{callNo}}</p>
    </div>
    <van-cell-group class="mt15" inset>
<!--      <van-cell title="可退款金额" :value="user.balance + ' 元'" />-->
      <van-field required disabled v-model="amount" label="申请退款金额" placeholder="请输入金额" />
      <van-field required v-model="name" label="申请人姓名" placeholder="请输入申请人的姓名" />
<!--      <van-field required v-model="reason" label="退款原因" placeholder="请输入退款原因" />-->
    </van-cell-group>
    <div class="block">
      <van-button type="primary" size="large" @click="submit">提交申请</van-button>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
    >
      <Info
        v-for="(item) in list"
        :key="item.id"
        :title="item.createTime"
        :openBtn="false"
      >
<!--        <InfoItem label="提退账户" :value="item.accountName" />-->
        <InfoItem label="退款金额" :value="item.amount" />
<!--        <InfoItem label="赠送余额" :value="item.give" />-->
        <InfoItem label="交易状态" :value="tranStatus[item.tranStatus]" />
<!--        <InfoItem label="申请人" :value="item.name" />-->
        <InfoItem label="处理结果" size="large" :value="item.reason" />
      </Info>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'Topic',
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      amount: null,
      tranStatus: {
        1: '申请中',
        2: '完成',
        3: '退回'
      },
      name: null,
      callNo: null
    }
  },
  computed: {
    user () {
      return this.$store.state.user || {}
    }
  },
  created () {
    this.amount = this.user.balance
    this.$http.get('/getCallNo').then(res => {
      if (res.code === 'ok') {
        this.callNo = res.msg
      } else {
        this.$toast.fail(res.msg)
      }
    })
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
      this.$store.dispatch('updateUserInfo')
    },
    submit () {
      if (!this.name || !this.amount) {
        this.$notify({ type: 'danger', message: '请输入退款人姓名、金额！' })
        return
      }
      if (this.amount > this.user.balance) {
        this.$notify({ type: 'danger', message: '申请退款金额不能超过可退金额！' })
        return
      }
      if (this.amount < 1 || this.amount > 200) {
        this.$notify({ type: 'danger', message: '申请提现金最小金额1.00元，最大200元！' })
        return
      }
      const data = {
        name: this.name,
        amount: this.amount
      }
      this.$http.post('/restful/kxRefundRecord/userRefund', this.$qs.stringify(data)).then(res => {
        if (res.code === 'ok') {
          this.$toast.success(res.msg)
          this.onClickLeft()
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    loadData () {
      this.$http.get('/restful/kxRefundRecord/getPPage', {
        params: {
          page: 1,
          limit: 5,
          accountName: this.user.username,
          tranType: 1
        }
      }).then(res => {
        if (res.code === 'ok') {
          this.list = this.list.concat(res.data.records)
          this.finished = true
          this.page = 1
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
  .warning {
    margin: 15px 0; padding: 15px;
    font-size: 13px; line-height: 32px; text-align: center;
    color: #f60;
    background: #fff;
  }
</style>
